<script>
export default {
  name: 'UserDefinedTimeline',

  props: {
    reverse: {
      type: Boolean,
      default: false
    },
    relation: String,
    number: Number,
    type: String
  },

  provide() {
    return {
      timeline: this
    }
  },
  methods: {
    handleClick(value) {
      this.$emit('clickSwitch', value)
    }
  },

  render() {
    const reverse = this.reverse
    const relation = this.relation
    let value = ''
    if (relation === 'or') {
      value = '或'
    } else if (relation === 'and') {
      value = '且'
    }
    const classes = {
      'el-timeline': true,
      'is-reverse': reverse
    }
    let slots = this.$slots.default || []
    if (reverse) {
      slots = slots.reverse()
    }
    let style
    if (this.type === 'data') {
      style = 'margin-right: 20px;top: ' + (this.number * 80 + 150) + 'px' + ';right: 20px'
    }
    if (this.type === 'rule') {
      style = 'margin-right: 40px;top: ' + (this.number * 30) + 'px' + ';right: 10px'
    }

    if (this.number > 1) {
      return (
        <div>

          <ul class={ classes }  style='margin-left: 70px'>
            { slots }
          </ul>
        </div>
      )
    } else {
      return (
        <div>
          <ul class={ classes }>
            { slots }
          </ul>
        </div>
      )
    }
  }
}
</script>


<style scoped>

</style>
